<script setup lang="ts">
import { defineProps, toRefs, withDefaults } from "vue"
interface props {
  color?: string
  href?: string | null
  line?: boolean
  size?: string | number
  weight?: string | number
}

const props = withDefaults(defineProps<props>(), {
  href: "https://fuyouplus.cn/#/home",
  line: true,
  color: "var(--themeColor)",
})

const { weight, size, color, href, line } = toRefs(props)

const link = () => {
  href.value && window.open(href.value)
}
</script>

<template>
  <div class="my-a" @click="link">
    <slot>fuyouplus.cn</slot>
  </div>
</template>

<style lang="scss" scoped>
.my-a {
  color: v-bind("line ? 'var(--TextColor)': color");
  cursor: var(--cursor-B);
  display: inline-block;
  position: relative;
  font-size: v-bind("size");
  font-weight: v-bind("weight");
  transition: all 0.3s var(--n-bezier);
  text-indent: 0 !important;
  &:hover {
    color: v-bind("color");
  }
  &:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 2px;
    background: v-bind("color");
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
    transform-origin: right;
    display: v-bind("line ? 'block':'none'");
  }
}
</style>
